'use client';

import type { NextPage } from 'next';

import './home.scss';
import TextSwiper from './components/TextSwiper';
import SvgIcon from '@/components/SvgIcon';
import BannerCarousel from './components/BannerCarousel';
import TrendingProducts from './components/TrendingProducts';
import SellCategory from './components/SellCategory';
import JoinAdvantage from './components/JoinAdvantage';
import SteveCase from './components/SteveCase';
import CustomerComments from './components/CustomerComments';
import OurBlogs from './components/OurBlogs';
import CommonQuestions from './components/CommonQuestions';
import InviteSignup from './components/InviteSignup';
import { createLogger } from '@/utils/front/logger';

const homeLogger = createLogger('Home');

type Props = {
  initData: {
    banners: Banner[];
    trendings: TrendProduct[];
  };
};
const HomePage: NextPage<Props> = ({ initData }) => {
  return (
    <div className={`home-page`}>
      <TextSwiper repeatCount={5}>
        <div className="slice">
          <span>PICK IT</span>
          <SvgIcon name="arrow-right" size={16} />
          <span>DROP IT</span>
          <SvgIcon name="arrow-right" size={16} />
          <span>SHOP IT</span>
          <SvgIcon name="arrow-right" size={16} />
          <span>SHIP IT</span>
          <SvgIcon name="arrow-right" size={16} />
          <span>my-company.net.cn</span>
        </div>
      </TextSwiper>

      <BannerCarousel banners={initData.banners} />

      <TrendingProducts trendings={initData.trendings} />

      <SellCategory />

      <JoinAdvantage />

      <TextSwiper repeatCount={5} style={{ padding: '52px 0' }}>
        <div className="slice">
          <span>RATED 4.9/5 STARS ON GOOGLE REVIEWS</span>
        </div>
      </TextSwiper>

      <SteveCase />

      <CustomerComments />

      <OurBlogs />

      <CommonQuestions />

      <InviteSignup />
    </div>
  );
};

export default HomePage;
